// =============================================================================
//
//      MIXINS
//
// =============================================================================


// Der glorreiche CLEARFIX:
//      Aktualisiert, um einen Einsturz der Außenabstände in
//      Kind-Elementen zu verhindern << j.mp/bestclearfix */
// -----------------------------------------------------------------------------
@mixin clearfix {
    zoom: 1;
    &:before, &:after {
        content: "\0020";
        display: block;
        height: 0;
        visibility: hidden;
    }
    &:after {
        clear: both;
    }
}
// -----------------------------------------------------------------------------


// Farbverlaufe
// -----------------------------------------------------------------------------
@mixin gradiant($color-1, $color-2, $grad-1: 20%, $grad-2: 53%) {
    background-image:         linear-gradient(bottom, $color-1 $grad-1, $color-2 $grad-2);
    background-image:      -o-linear-gradient(bottom, $color-1 $grad-1, $color-2 $grad-2);
    background-image:    -moz-linear-gradient(bottom, $color-1 $grad-1, $color-2 $grad-2);
    background-image: -webkit-linear-gradient(bottom, $color-1 $grad-1, $color-2 $grad-2);
    background-image:     -ms-linear-gradient(bottom, $color-1 $grad-1, $color-2 $grad-2);
    background-image:        -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop($grad-1, $color-1),
            color-stop($grad-2, $color-2)
    );
}
// -----------------------------------------------------------------------------


// Festlegen der Schriftgroessen (v.a. bei Ueberschriften)
// -----------------------------------------------------------------------------
@mixin font-size-heading($size) {
    font-size:   $size/$font-size + em;
    line-height: $magic-number/$size + em;
}
// -----------------------------------------------------------------------------


// Rahmendefinitionen
// -----------------------------------------------------------------------------
// Standard-Border
@mixin border-def($color: $color-border, $style: solid, $width: 1px) {
    border: $width $style $color;
}
// Radius
@mixin border-radius($radius: $corner-radius) {
    -ms-border-radius: $radius;
    -moz-border-radius: $radius;
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
// -----------------------------------------------------------------------------


//  Formular-Anordnungen
// -----------------------------------------------------------------------------
@mixin form_arrange($left: 25%, $field-margin: 2%) {
    $right: 100% - $left;

    label {
        width: $left;
    }
    input[type="text"], textarea, select {
        width: $right;
        &.form-field-small {
            width: ($right * $left / 100%) - $field-margin;
            margin-right: $field-margin;
            &.omega {
                width: $right * $left / 100%;
                margin-right: 0;
            }
        }
        &.form-field-big {
            width: ($right * $right / 100%) - $field-margin;
            margin-right: $field-margin;
            &.omega {
                width: $right * $right / 100%;
                margin-right: 0;
            }
        }
    }
    .form-chra {
        label {
            width: $left;
        }
        div {
            width: $right;
            label {
                width: 90%;
            }
        }
    }
}
@mixin form_arrange_vertical($left: 25%, $field-margin: 2%) {
    $right: 100% - $left;

    label, input[type="text"], textarea, select, .form-chra {
        margin-left : 0;
        margin-right: 0;
        width: 100%;
        &.form-field-small {
            width: $left - $field-margin;
            margin-right: $field-margin;
            &.omega {
                width: $left;
                margin-right: 0;
            }
        }
        &.form-field-big {
            width: $right - $field-margin;
            margin-right: $field-margin;
            &.omega {
                width: $right;
                margin-right: 0;
            }
        }
    }
    .form-chra {
        div {
            width: 100%;
        }
        > label {
            width: 100%;
        }
    }
}
// -----------------------------------------------------------------------------


// Farbverlaufe
// -----------------------------------------------------------------------------
@mixin gradiant($color-1, $color-2, $grad-1: 20%, $grad-2: 53%) {
    background-image:         linear-gradient(bottom, $color-1 $grad-1, $color-2 $grad-2);
    background-image:      -o-linear-gradient(bottom, $color-1 $grad-1, $color-2 $grad-2);
    background-image:    -moz-linear-gradient(bottom, $color-1 $grad-1, $color-2 $grad-2);
    background-image: -webkit-linear-gradient(bottom, $color-1 $grad-1, $color-2 $grad-2);
    background-image:     -ms-linear-gradient(bottom, $color-1 $grad-1, $color-2 $grad-2);
    background-image:        -webkit-gradient(
            linear,
            left bottom,
            left top,
            color-stop($grad-1, $color-1),
            color-stop($grad-2, $color-2)
    );
}
// -----------------------------------------------------------------------------